<template>
  <div class="w-full bg-bsr border-6 border-[#C58632] shadow-md">
    <div class="hidden md:flex items-center mx-auto px-4 h-full bg-bsr">
      <div class="flex items-center justify-between w-full">
        <!-- 左侧 Logo 和网站名称 -->
        <div class="flex items-center text-bsy">
          <NuxtLink to="/" class="flex items-center">
            <header-logo class="lg:hidden sm:block h-full w-full" />
            <img class="hidden lg:block w-84" src="/siteName.gif" />
          </NuxtLink>
        </div>

        <!-- 中间导航菜单 -->
        <nav class="hidden md:flex space-x-8">
          <ui-PcNav
            :items="navItems"
            :animation-time="600"
            :particle-count="15"
            :particle-distances="[90, 10]"
            :particle-r="100"
            :time-variance="300"
            :colors="[1, 2, 3, 1, 2, 3, 1, 4]"
            :initial-active-index="0"
            @goblog="gotoBlog"
          />
        </nav>
      </div>
    </div>
    <!-- 移动端菜单按钮 -->
    <div class="flex h-full md:hidden">
      <UiMobileNav
        :class="{ activeMenu: isActive }"
        position="right"
        logo-url="/siteName.gif"
        :items="menuItems"
        :display-socials="false"
        :display-item-numbering="true"
        menu-button-color="#fff"
        open-menu-button-color="#fff"
        :change-menu-color-on-open="true"
        :colors="['#c2301c']"
        accent-color="#c2301c"
        @menu-open="handleMenuOpen"
        @menu-close="handleMenuClose"
        @menu-close-complete="handleMenuCloseComplete"
        @go-OtherPage="gotoBlog"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// const closeMenu = () => {
//   (document.activeElement as HTMLElement)?.blur();
// };
const gotoBlog = () => {
  window.open("https://fangq.site/blog", "_blank");
};

const navItems = [
  { label: "首页", href: "/" },
  { label: "摸鱼", href: "/game" },
  { label: "文章", href: "/article" },
  { label: "项目", href: "/projects" },
  { label: "访客", href: "/visitor" },
  { label: "博客", href: "" },
  // { label: "关于我", href: "/about" },
];
const menuItems = [
  { label: "首页", ariaLabel: "首页", link: "/" },
  { label: "摸鱼", ariaLabel: "摸鱼", link: "/game" },
  { label: "文章", ariaLabel: "文章", link: "/article" },
  { label: "项目", ariaLabel: "项目", link: "/projects" },
  { label: "访客", ariaLabel: "访客", link: "/visitor" },
  { label: "博客", ariaLabel: "博客", link: "" },
];

const isActive = ref(false);

const handleMenuOpen = () => {
  isActive.value = true;
  document.body.style.overflow = "hidden";
};
const handleMenuClose = () => {
  document.body.style.overflow = "";
};

const handleMenuCloseComplete = () => {
  isActive.value = false;
};
</script>

<style scoped>
.activeMenu {
  height: 100vh;
  /* 移除过渡效果，让高度变化立即生效 */
  /* transition: height 0.3s ease-in-out; */
}
</style>
